<template>
  <a-layout class="page-miH page-bgBack">
    <div class="fix-salary-wrapper">
      <a-row type="flex" justify="space-between" style="margin-bottom: 24px;">
        <a-col>
          <a-icon type="left" style="font-size: 24px" @click="$router.go(-1)" />
        </a-col>
        <div class="left2" @click="$router.go(-1)" style="cursor: pointer;">
          返回
        </div>
        <a-col style="font-size: 16px;font-weight: 500;">定薪模板</a-col>
        <a-col>
          <a-button type="primary" @click="handleAddTemplate">
            新增定薪模板
          </a-button>
        </a-col>
      </a-row>
      <div>
        <div v-for="(item, index) in fixData" :key="index" class="fix-item-wrapper">
          <div class="fix-item-one">
            <div style="margin-bottom: 5px;">
              <span />
              <span class="fix-item-name">{{ item.name }}</span>
            </div>
            <div v-if="item.isDefault" style="color: #222426;opacity: 0.5;">
              默认
            </div>
          </div>
          <div class="fix-item-two">
            <div style="color: #9C9C9C;margin-bottom: 5px">定薪项</div>
            <div>
              <a-tag v-for="item2 in item.fixedSalaryItemVOList" :key="item2.id">
                {{ item2.itemName }}
              </a-tag>
            </div>
          </div>
          <div class="fix-item-three">
            <div>
              <a-button type="link" block @click="handleEditTemplate(item, index)">
                编辑模板
              </a-button>
            </div>
            <div>
              <a-button v-if="!item.isDefault" type="link" block @click="handleDeleteTemplate(item.id)">
                删除
              </a-button>
            </div>
          </div>
        </div>
      </div>
      <a-modal v-model="addVisible" title="新增定薪模板" @ok="handleAddOk" @cancel="handleAddCancel">
        <a-form-model ref="addForm" :model="addForm" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-model-item label="模板名称" prop="name">
            <a-input v-model="addForm.name" placeholder="请填写" />
          </a-form-model-item>
          <a-form-model-item label="定薪项" prop="itemIds">
            <div class="fix-salary-item-wrapper">
              <div v-for="(item, index) in fixItems" :key="index" :class="computeItemClass(item)" @click="handleAddSelected(item)">
                <span>
                  {{ item.name }}
                </span>
              </div>
            </div>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
      <a-modal v-model="editVisible" title="编辑定薪模板" @ok="handleEditOk" @cancel="handleEditCancel">
        <a-form-model ref="editForm" :model="editForm" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
          <a-form-model-item label="模板名称" prop="name">
            <a-input v-model="editForm.name" placeholder="请填写" />
          </a-form-model-item>
          <a-form-model-item label="定薪项" prop="itemIds">
            <div class="fix-salary-item-wrapper">
              <div v-for="(item, index) in fixItems" :key="index" :class="computeItemClass(item)" @click="handleAddSelected(item)">
                <span>
                  {{ item.name }}
                </span>
              </div>
            </div>
          </a-form-model-item>
        </a-form-model>
      </a-modal>
      <a-modal v-model="deleteVisible" title="删除确认" @ok="deleteOk">
        <div style="display: flex;justify-content: center;align-items: center;">
          是否确认删除？
        </div>
      </a-modal>
      <a-modal v-model="fixVisible" title="更改确认" @ok="fixOk">
        <div style="display: flex;justify-content: center;align-items: center;">
          该模板正在被使用，是否确认更改定薪项？
        </div>
      </a-modal>
    </div>
  </a-layout>
</template>

<script>
import { selectByCompanyId, addSalaryTemplate, deleteSalaryTemplate, fixSalaryTemplate, haveUsedTemplate } from "@/api/wages/file";

const fixItems = [
  {
    id: 1,
    name: "基本工资",
    selected: true,
    isDefault: true
  },
  {
    id: 2,
    name: "交通补贴",
    selected: false,
    isDefault: false
  },
  {
    id: 3,
    name: "住房补贴",
    selected: false,
    isDefault: false
  },
  {
    id: 4,
    name: "全勤奖",
    selected: false,
    isDefault: false
  },
  {
    id: 5,
    name: "餐补",
    selected: false,
    isDefault: false
  },
  {
    id: 6,
    name: "高温补贴",
    selected: false,
    isDefault: false
  },
  {
    id: 7,
    name: "工龄补贴",
    selected: false,
    isDefault: false
  },
  {
    id: 8,
    name: "夜班津贴",
    selected: false,
    isDefault: false
  },
  {
    id: 9,
    name: "通讯补贴",
    selected: false,
    isDefault: false
  },
  {
    id: 10,
    name: "节假日补贴",
    selected: false,
    isDefault: false
  },
  {
    id: 11,
    name: "员工慰问金",
    selected: false,
    isDefault: false
  },
  {
    id: 12,
    name: "推荐奖",
    selected: false,
    isDefault: false
  },
  {
    id: 13,
    name: "职务津贴",
    selected: false,
    isDefault: false
  },
  {
    id: 14,
    name: "绩效工资",
    selected: false,
    isDefault: false
  },
  {
    id: 15,
    name: "季度奖",
    selected: false,
    isDefault: false
  },
  {
    id: 16,
    name: "销售提成",
    selected: false,
    isDefault: false
  },
  {
    id: 17,
    name: "计件工资",
    selected: false,
    isDefault: false
  },
  {
    id: 18,
    name: "工龄工资",
    selected: false,
    isDefault: false
  },
  {
    id: 19,
    name: "司龄工资",
    selected: false,
    isDefault: false
  },
  {
    id: 20,
    name: "职称工资",
    selected: false,
    isDefault: false
  },
  {
    id: 21,
    name: "技能工资",
    selected: false,
    isDefault: false
  },
  {
    id: 22,
    name: "学历工资",
    selected: false,
    isDefault: false
  }
];
export default {
  data() {
    return {
      companyId: "",
      fixItems,
      fixData: [],
      addVisible: false,
      editVisible: false,
      deleteVisible: false,
      fixVisible: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
      addForm: {
        name: ""
      },
      editForm: {
        name: ""
      },
      rules: {
        name: [{ required: true, message: "必填", trigger: "blur" }]
      },
      deleteId: "",
      editId: "",
      editIndex: 0,
      editRecord: {}
    };
  },

  created() {
    this.companyId = this.$store.state.hr.companyId;
    this.init();
  },

  methods: {
    init() {
      const data = {
        companyId: this.companyId
      };
      selectByCompanyId(data)
        .then(res => {
          this.fixData = res.data;
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
    },
    handleAddOk() {
      const arr = this.fixItems.filter((item, index) => {
        if (item.selected) return true;
      });
      const data = {
        companyId: this.companyId,
        isDefault: false,
        name: this.addForm.name,
        itemIds: arr.map(item => item.id).join(",")
      };
      this.$refs.addForm.validate(valid => {
        if (valid) {
          addSalaryTemplate(data)
            .then(res => {
              this.addVisible = false;
              this.init();
            })
            .catch(err => {
              console.log("debug log --> ", err);
            });
        }
      });
    },
    handleAddSelected(item) {
      if (item.id === 1) return;
      item.selected = !item.selected;
    },
    handleAddTemplate() {
      this.addVisible = true;
      this.addForm = {};
      this.fixItems.forEach((item, index) => {
        if (index > 0) item.selected = false;
      });
    },
    handleAddCancel() {
      this.$refs.addForm.clearValidate();
    },
    computeItemClass(item) {
      if (item.id === 1) return "fix-salary-item-tag fix-salary-item-default";
      if (item.selected) return "fix-salary-item-tag fix-salary-item-selected";
      return "fix-salary-item-tag";
    },
    handleEditTemplate(record, index) {
      this.editId = record.id;
      this.editIndex = index;
      this.editRecord = JSON.parse(JSON.stringify(record));
      this.editForm.name = record.name;
      const arr = record.itemIds.split(",");
      this.fixItems.forEach((item, index) => {
        if (arr.includes(String(item.id))) item.selected = true;
        else item.selected = false;
      });
      this.editVisible = true;
    },
    handleDeleteTemplate(id) {
      this.deleteId = id;
      this.deleteVisible = true;
    },
    handleEditOk() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          const arr = [];
          this.fixItems.forEach((item, index) => {
            if (item.selected) arr.push(item.id);
          });
          const data = {
            fixedSalaryTemplateId: this.editId,
            itemIds: arr.join(",")
          };
          haveUsedTemplate(data)
            .then(res => {
              const flag = res.data;
              if (flag) this.editTemplate();
              else {
                this.editVisible = false;
                this.fixVisible = true;
              }
            })
            .catch(err => {
              console.log("debug log --> ", err);
            });
        }
      });
    },
    editTemplate() {
      const arr = this.fixItems.filter((item, index) => {
        if (item.selected) return true;
      });
      const data = {
        id: this.editId,
        companyId: this.companyId,
        isDefault: this.editIndex === 0,
        name: this.editForm.name,
        itemIds: arr.map(item => item.id).join(",")
      };
      fixSalaryTemplate(data)
        .then(res => {
          this.editVisible = false;
          this.fixVisible = false;
          this.init();
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
    },
    handleEditCancel() {
      this.$refs.editForm.clearValidate();
    },
    deleteOk() {
      deleteSalaryTemplate(this.deleteId)
        .then(res => {
          this.init();
          this.$message.success("删除成功!");
          this.deleteVisible = false;
        })
        .catch(err => {
          console.log("debug log --> ", err);
        });
    },
    fixOk() {
      this.editTemplate();
    }
  }
};
</script>

<style scoped lang="scss">
.left2 {
  z-index: 3;
  left: 50px;
  position: absolute;
  color: #595959;
  font-size: 16px;
}
.fix-salary-item-wrapper {
  width: 400px;
  .fix-salary-item-tag {
    cursor: pointer;
    height: 28px;
    line-height: 28px;
    background: #ffffff;
    border-radius: 4px;
    border: 1px solid #d7d7d7;
    display: inline-block;
    font-size: 12px;
    margin-right: 10px;
    padding: 0 5px;
  }
  .fix-salary-item-default {
    background: #ededed;
    border-color: #a2a2a2;
  }
  .fix-salary-item-selected {
    background: #ffffff;
    border: 1px solid var(--primary);
    color: var(--primary);
  }
}

.fix-salary-wrapper {
  padding: 24px;

  .fix-item-wrapper {
    margin-bottom: 20px;
    padding: 20px;
    height: 100px;
    border-radius: 4px;
    border: 1px solid #e8e8e8;
    display: flex;
    .fix-item-one {
      width: 20%;
      box-shadow: 1px 0px 0px 0px #e8e8e8;
    }
    .fix-item-two {
      width: 60%;
      padding-left: 20px;
      box-shadow: 1px 0px 0px 0px #e8e8e8;
    }
    .fix-item-three {
      padding-left: 20px;
      width: 20%;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .fix-item-name {
      font-size: 18px;
      font-weight: 600;
      color: #222426;
      line-height: 25px;
    }
  }
}
</style>
